<%--
  Created by IntelliJ IDEA.
  User: 天天好心情
  Date: 2024/10/21
  Time: 15:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    html, body, #app {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
    }

    .el-container {
        height: 100%;
    }

    .el-header, .el-footer {
        background-color: #23262e;
        color: #333;
        text-align: center;
        line-height: 60px;
        padding: 0;
    }

    .el-aside {
        background-color: #545c64;
        color: #333;
        line-height: 200px;
    }

    .el-main {
        background-color: #fffcf5;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    .el-avatar {
        float: left;
        margin-top: 10px;
        margin-left: 280px;
    }
</style>
<body>
<div id="app">
    <el-container>
        <%--头部--%>
        <el-header>
            <div style="width: 30%;height:60px;float: left">
                <div class="block"><el-avatar shape="square" :src="squareUrl" style="margin-left: 15px;margin-top: 0;width:130px;height: 100%"></el-avatar></div>

            </div>
            <div style="width: 40%;height:60px;float: left;font-size:30px;color:gold;font-weight:600">{{this.StaffBranchName}}</div>
            <div style="width: 30%;height:60px;float: right">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                    <el-avatar :src="staffInfo.url"></el-avatar>
                        <div style="height: 60px;float: left;text-align: center;margin-left: 10px">{{staffInfo.staffname}}</div>
                        <i style="margin-top: 23px;margin-left: 10px" class="el-icon-arrow-down el-icon--right"></i>
                    </span>

                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="info">
                                基本信息
                        </el-dropdown-item>
                        <el-dropdown-item command="updatePwd">
                            <a href="updatepwd.jsp" target="main" style="text-decoration-line: none;color: black">
                                修改密码
                            </a>
                        </el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <a href="main.jsp" target="main" style="text-decoration-line: none;color: white">
                    &nbsp;首页&nbsp;<i class="el-icon-s-home"></i>
                </a>
            </div>
        </el-header>
        <%--主体--%>
        <el-container>
            <%--左边--%>
            <el-aside width="200px">
                <%--导航栏菜单--%>
                <el-menu
                        default-active="1"
                        :unique-opened="true"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-submenu v-for="menu in leftMenus" :index="menu.mid+''">
                        <template slot="title">
                            <i :class="menu.icon"></i>
                            <span>{{menu.mname}}</span>
                        </template>
                        <el-menu-item-group v-for="child in menu.children">
                            <a :href="child.murl" target="main" style="text-decoration-line: none">
                                <el-menu-item :index="child.mid+''">
                                    <i :class="child.icon"></i>
                                    {{child.mname}}
                                </el-menu-item>
                            </a>
                        </el-menu-item-group>
                    </el-submenu>

                </el-menu>

            </el-aside>
            <%--中间--%>
            <el-main>
                <%-- iframe的作用是嵌入网页，可以嵌入网页中的内容，比如网页中的图片、视频、音频、表格、文本、链接等等。 --%>
                <iframe src="/views/main.jsp" name="main" frameborder="0" width="100%" height="100%"></iframe>
            </el-main>
        </el-container>
    </el-container>
    <%--修改个人信息对话框--%>
    <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
        <el-form :model="updateStafffrom" :rules="rules">
            <el-form-item label="头像" prop="url">
                <!--上传图片-->
                <%--
                class="avatar-uploader"  上传组件的类名
                :show-file-list="false"  是否显示文件列表
                :on-success="handleAvatarSuccess"  上传成功回调函数
                :before-upload="beforeAvatarUpload"  上传前校验函数
                --%>
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="updateStafffrom.url" :src="updateStafffrom.url" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="编号" >
                <el-input v-model="updateStafffrom.staffid" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="姓名" >
                <el-input v-model="updateStafffrom.staffname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话"  prop="phone">
                <el-input v-model="updateStafffrom.phone" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="地址" >
                <el-input v-model="updateStafffrom.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所在门店" >
                <el-input v-model="updateStafffrom.branch.branchname" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="部门" >
                <el-input v-model="updateStafffrom.department.deptname" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
             <el-form-item label="职位" >
                <el-input v-model="updateStafffrom.role.rolename" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="入职时间" >
                <el-input v-model="updateStafffrom.entrytime" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
             <el-form-item label="身份证" >
                <el-input v-model="updateStafffrom.idcard" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateStaff">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
   /* // 手机号校验
    var checkPhone = (rule, value, callback) => {
        setTimeout(() => {
            //判断唯一
            axios.get("/staffInfo/checkPhone?phone=" + value).then(resp => {
                console.log(resp);
                if (resp.data.code === 500) {
                    callback(new Error('手机号已存在'));
                } else {
                    callback();
                }
            })
        }, 10);
    }*/

    let app = new Vue({
        el: "#app",
        data: {
            staffInfo: {},//员工信息
            squareUrl: "../images/1.jpg",//头像路径
            leftMenus: undefined,//左侧菜单
            StaffBranchName: undefined,//员工门店名称
            //修改个人信息
            updateStafffrom: {
                branch:{},
                department:{},
                role:{}
            },
            //修改个人信息对话框
            dialogFormVisible: false,
            imageUrl: '',

            // 表单验证规则
            rules: {
                phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
                    // {validator: checkPhone, trigger: 'blur'},
                ]
            }
        },
        //自启动
        created() {
            this.getStaffInfo();
            this.leftMenu();
            this.getStaffBranchName();
        },
        //方法
        methods: {
            //获取登陆的该用户的门店
            getStaffBranchName(){
                axios.get("/staff/getStaffInfoAll11").then(resp => {
                    this.StaffBranchName = resp.data.data.branch.branchname;
                })
            },
            //获取登陆的该用户的信息
            getStaffInfo() {
                axios.get("/staff/getStaffInfo").then(resp => {
                    this.staffInfo = resp.data.data;
                })
            },
            // 菜单展开
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            // 菜单关闭
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 退出
            handleCommand(command){
                if (command==='logout'){
                    this.$confirm('是否退出系统？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get("/staff/logout").then(resp=>{
                            if (resp.data.code===200){
                                this.$message({
                                    type: 'success',
                                    message: '退出成功!'
                                });
                                location.href="/login.jsp";
                            }
                        })
                    })
                }else if (command==='info'){
                    axios.get("/staff/getStaffInfoAll11").then(resp => {
                        this.updateStafffrom = resp.data.data;
                        //console.log(this.updateStafffrom);
                        this.dialogFormVisible=true;
                    })
                }
            },
            //加载左侧菜单
            leftMenu(){
                axios.get("/menu/leftMenu").then(resp=>{
                    if (resp.data.code===200){
                        this.leftMenus = resp.data.data;
                        //console.log(resp);
                    }
                })
            },
            //上传图片成功后触发的函数
            handleAvatarSuccess(res, file) {
                this.updateStafffrom.url = res.data;//获取图片地址
            },
            //修改员工信息
            updateStaff(){
                axios.post("/staff/updateStaff",this.updateStafffrom).then(resp=>{
                    if (resp.data.code===200){
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.dialogFormVisible=false;
                        this.getStaffInfo();
                    }
                })
            },
            //上传前回调的函数
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' ||
                    file.type === 'image/png' ||
                    file.type === 'image/jpg' ||
                    file.type === 'image/webp';//判断上传文件类型
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    })
</script>
</html>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 300px;
        height: 300px;
        display: block;
    }
</style>
